<template>
  <div class="group-send">
    <div class="mt-20 mb-20">
      <SearchForm
        v-model="formOption.data"
        :formOption="formOption"
        :btn-list="btnList"
        :show-btn="true"
        label-width="90px"
      />
    </div>

    <div class="add-text-message">
      <el-alert
        title="教育、医疗、酒类、引导加微信容易被运营商屏蔽，请谨慎发送"
        type="warning"
        show-icon
      >
      </el-alert>
      <el-button type="primary" class="mt-20 mb-20" @click="addMessageTemplate">
        新建模板
      </el-button>
    </div>

    <PageTable :loading="loading" :columns="columns" :data="dataSource" />

    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { SHORT_LETTER_TYPE } from '@/enum/message'
import { export2Excel } from '@/utils/export'
export default {
  name: 'TemplateMange',
  props: {},
  data() {
    return {
      loading: true,
      formOption: {
        data: {
          type: ''
        },
        items: [
          {
            type: 'daterange',
            label: '创建日期',
            value: 'time',
            valueFormat: 'yyyy-MM-dd'
          },
          {
            type: 'select',
            label: '模板类型',
            value: 'type',
            selectList: SHORT_LETTER_TYPE
          }
        ]
      },
      btnList: [
        {
          type: 'primary',
          label: '筛选',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.getList()
          }
        },
        {
          label: '导出',
          onClick: () => {
            this.exportFile()
          }
        }
      ],
      total: 10,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      columns: [
        {
          label: '模板内容',
          prop: 'content'
        },
        {
          prop: 'type',
          label: '模板类型',
          render: (h, { row }) => {
            return <span>{row.type === 1 ? '营销短信' : '通知短信'}</span>
          }
        },
        {
          label: '场景说明',
          prop: 'scene'
        },
        {
          prop: 'isEnable',
          label: '启用状态',
          render: (h, { row }) => {
            return <span>{row.isEnable ? '已启用' : '未启用'}</span>
          }
        },
        {
          label: '排序',
          prop: 'sort'
        },
        {
          label: '创建时间',
          prop: 'createdTime'
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <div>
                {row.isEnable ? (
                  <el-button type="text" onClick={() => this.updateStatus(row.isEnable, row.id)}>
                    隐藏
                  </el-button>
                ) : (
                  <span>
                    <el-button type="text" onClick={() => this.updateStatus(row.isEnable, row.id)}>
                      启用
                    </el-button>
                    <PopConfirm text={'确认删除模板吗？'} confirm={() => this.delete(row.id)}>
                      <el-button class="ml-5 mr-5" type="text">
                        删除
                      </el-button>
                    </PopConfirm>
                  </span>
                )}
                <el-button type="text" onClick={() => this.edit(row.id)}>
                  编辑
                </el-button>
              </div>
            )
          }
        }
      ],
      dataSource: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    async getList() {
      const params = {
        ...this.listQuery
      }
      const { type, time } = this.formOption.data
      if (type) params.type = type
      if (time) params.startTime = time[0]
      if (time) params.endTime = time[1]
      const {
        data: { records, total }
      } = await this.$http.message.templateApi.getList({ params })
      this.total = total
      this.dataSource = records
      this.loading = false
    },
    // 删除
    async delete(id) {
      const { status } = await this.$http.message.templateApi.delete(id)
      if (status === 200) {
        this.$message.success('已删除！')
        if (this.dataSource.length == 1 && this.listQuery.pageNo > 1) {
          this.listQuery.pageNo--
        }
        this.getList()
      }
    },
    // 更新启用状态
    async updateStatus(isEnable, id) {
      const { status } = await this.$http.message.templateApi.setIsOpen({ isEnable: !isEnable, id })
      if (status === 200) {
        this.$message.success(isEnable ? '已隐藏' : '已启用')
        this.getList()
      }
    },
    // 导出
    async exportFile() {
      const headerData = this.columns.filter(item => item.prop).map(item => item.label)
      const filterData = this.columns.filter(item => item.prop).map(item => item.prop)
      const tableData = this.dataSource
      export2Excel(headerData, tableData, filterData, '短信模板', () => {
        this.$message.success('导出成功')
      })
    },
    // 详情
    edit(id) {
      this.$router.push({
        name: 'EditTemplate',
        query: { id, type: 'update' }
      })
    },
    // 新增
    addMessageTemplate() {
      this.$router.push({ name: 'AddTemplate' })
    }
  }
}
</script>

<style lang="scss" scoped></style>
